<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>黑白艺术风格简历 | AIGC自媒体</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* 基础样式重置 - Awwwards黑白极简风格 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Inter', 'Helvetica Neue', sans-serif;
        }
        
        :root {
            --primary-color: #000000;
            --secondary-color: #333333;
            --light-gray: #f5f5f5;
            --medium-gray: #e0e0e0;
            --dark-gray: #777777;
            --white: #ffffff;
            --transition-standard: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            --shadow-light: 0 4px 20px rgba(0, 0, 0, 0.05);
            --shadow-medium: 0 8px 30px rgba(0, 0, 0, 0.1);
        }
        
        body {
            line-height: 1.6;
            color: var(--secondary-color);
            background-color: var(--white);
            overflow-x: hidden;
        }
        
        a {
            text-decoration: none;
            color: var(--primary-color);
            position: relative;
            transition: var(--transition-standard);
        }
        
        a::after {
            content: '';
            position: absolute;
            width: 0;
            height: 1px;
            bottom: -2px;
            left: 0;
            background-color: var(--primary-color);
            transition: var(--transition-standard);
        }
        
        a:hover::after {
            width: 100%;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        section {
            padding: 100px 0;
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        section.visible {
            opacity: 1;
            transform: translateY(0);
        }
        
        h1, h2, h3, h4, h5, h6 {
            font-weight: 600;
            letter-spacing: -0.5px;
            color: var(--primary-color);
        }
        
        h2 {
            font-size: 3.5rem;
            margin-bottom: 60px;
            text-align: center;
            position: relative;
            display: inline-block;
            left: 50%;
            transform: translateX(-50%);
        }
        
        h2::after {
            content: '';
            position: absolute;
            bottom: -15px;
            left: 0;
            width: 60px;
            height: 1px;
            background-color: var(--primary-color);
        }
        
        h3 {
            font-size: 2rem;
            margin-bottom: 30px;
        }
        
        /* 导航栏样式 */
        nav {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            background-color: var(--white);
            z-index: 1000;
            padding: 25px 0;
            transition: var(--transition-standard);
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        }
        
        nav.scrolled {
            padding: 15px 0;
            box-shadow: var(--shadow-light);
        }
        
        .nav-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .logo {
            font-size: 1.5rem;
            font-weight: 400;
            letter-spacing: 2px;
            text-transform: uppercase;
        }
        
        .nav-links {
            display: flex;
            list-style: none;
        }
        
        .nav-links li {
            margin-left: 40px;
        }
        
        .nav-links a {
            color: var(--primary-color);
            font-size: 0.9rem;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
        
        .menu-toggle {
            display: none;
            cursor: pointer;
            font-size: 1.5rem;
        }
        
        /* 英雄区样式 */
        #hero {
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            position: relative;
            padding: 0 20px;
            opacity: 1;
            transform: translateY(0);
        }
        
        .hero-content {
            max-width: 800px;
        }
        
        .hero-content h1 {
            font-size: 5rem;
            margin-bottom: 20px;
            line-height: 1.1;
        }
        
        .hero-content .job-title {
            font-size: 1.2rem;
            text-transform: uppercase;
            letter-spacing: 5px;
            margin-bottom: 30px;
            display: inline-block;
            position: relative;
            padding: 0 20px;
        }
        
        .hero-content .job-title::before,
        .hero-content .job-title::after {
            content: '';
            position: absolute;
            top: 50%;
            width: 40px;
            height: 1px;
            background-color: var(--primary-color);
        }
        
        .hero-content .job-title::before {
            left: 0;
            transform: translateY(-50%);
        }
        
        .hero-content .job-title::after {
            right: 0;
            transform: translateY(-50%);
        }
        
        .hero-content p {
            font-size: 1.2rem;
            line-height: 1.8;
            margin-bottom: 40px;
            color: var(--secondary-color);
            max-width: 650px;
            margin-left: auto;
            margin-right: auto;
        }
        
        .scroll-indicator {
            position: absolute;
            bottom: 50px;
            left: 50%;
            transform: translateX(-50%);
            animation: bounce 2s infinite;
        }
        
        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% {
                transform: translateY(0) translateX(-50%);
            }
            40% {
                transform: translateY(-20px) translateX(-50%);
            }
            60% {
                transform: translateY(-10px) translateX(-50%);
            }
        }
        
        /* 按钮样式 */
        .btn {
            display: inline-block;
            padding: 12px 35px;
            border: 1px solid var(--primary-color);
            color: var(--primary-color);
            text-transform: uppercase;
            letter-spacing: 2px;
            font-size: 0.9rem;
            transition: var(--transition-standard);
            background: transparent;
            cursor: pointer;
        }
        
        .btn:hover {
            background-color: var(--primary-color);
            color: var(--white);
        }
        
        /* 关于我样式 */
        #about {
            background-color: var(--light-gray);
        }
        
        .about-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 80px;
            align-items: center;
        }
        
        .profile-img {
            width: 100%;
             ;
            transition: var(--transition-standard);
        }
        
        .profile-img:hover {
             ;
        }
        
        .about-text p {
            margin-bottom: 30px;
            font-size: 1.1rem;
            line-height: 1.8;
            color: var(--secondary-color);
        }
        
        .skills {
            margin-top: 50px;
        }
        
        .skill-item {
            margin-bottom: 30px;
        }
        
        .skill-item h4 {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        .progress-bar {
            height: 2px;
            background-color: var(--medium-gray);
            overflow: hidden;
        }
        
        .progress {
            height: 100%;
            background-color: var(--primary-color);
            width: 0;
            transition: width 1.5s ease;
        }
        
        .skill-item.visible .progress {
            width: var(--width);
        }
        
        /* 经历时间轴样式 */
        #experience {
            position: relative;
            padding-left: 100px;
        }
        
        #experience::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 1px;
            background-color: var(--medium-gray);
        }
        
        .timeline-item {
            position: relative;
            margin-bottom: 80px;
            padding-right: 100px;
        }
        
        .timeline-date {
            position: absolute;
            left: -100px;
            top: 0;
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            width: 80px;
            text-align: right;
        }
        
        .timeline-content h3 {
            margin-bottom: 10px;
        }
        
        .timeline-content .company {
            font-style: italic;
            color: var(--dark-gray);
            margin-bottom: 20px;
            display: block;
        }
        
        .timeline-content p,
        .timeline-content ul {
            color: var(--secondary-color);
            margin-bottom: 20px;
            line-height: 1.8;
        }
        
        .timeline-content ul {
            padding-left: 20px;
        }
        
        /* 作品集样式 */
        #portfolio {
            background-color: var(--light-gray);
        }
        
        .portfolio-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 30px;
            margin-bottom: 80px;
        }
        
        .portfolio-item {
            position: relative;
            overflow: hidden;
            cursor: pointer;
           margin-bottom: 20px;
        }
        
        .portfolio-item img {
            width: 100%;
            height: auto%;
            object-fit: contain;
            transition: var(--transition-standard);
        }
        
        .portfolio-item:hover img {
            transform: scale(1.05);

        }
        
        .video-section {
            margin-top: 100px;
        }
        
        .video-section h3 {
            margin-bottom: 40px;
            text-align: center;
        }
        
        .videos-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
            gap: 40px;
        }
        
        .video-item {
            aspect-ratio: 16/9;
            overflow: hidden;
            position: relative;
        }
        
        .video-item video {
            width: 100%;
            height: 100%;
            object-fit: cover;
         
            transition: var(--transition-standard);
        }
        
        .video-item:hover video {
             ;
        }
        
        /* 图片查看器样式 */
        .image-viewer {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.9);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 2000;
            opacity: 0;
            visibility: hidden;
            transition: var(--transition-standard);
        }
        
        .image-viewer.active {
            opacity: 1;
            visibility: visible;
        }
        
        .image-viewer-content {
            max-width: 90%;
            max-height: 80%;
            position: relative;
        }
        
        .image-viewer img {
            max-width: 100%;
            max-height: 80vh;
        }
        
        .close-btn {
            position: absolute;
            top: -50px;
            right: 0;
            color: var(--white);
            font-size: 2rem;
            background: none;
            border: none;
            cursor: pointer;
            transition: var(--transition-standard);
        }
        
        .close-btn:hover {
            transform: rotate(90deg);
        }
        
        /* 联系方式样式 */
        #contact {
            padding-bottom: 150px;
        }
        
        .contact-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 80px;
        }
        
        .contact-form {
            padding-right: 40px;
        }
        
        .form-group {
            margin-bottom: 40px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 10px;
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        .form-group input,
        .form-group textarea {
            width: 100%;
            padding: 15px 0;
            border: none;
            border-bottom: 1px solid var(--medium-gray);
            background: transparent;
            font-size: 1.1rem;
            transition: var(--transition-standard);
        }
        
        .form-group input:focus,
        .form-group textarea:focus {
            outline: none;
            border-bottom-color: var(--primary-color);
        }
        
        .form-group textarea {
            min-height: 150px;
            resize: none;
        }
        
        .contact-info {
            border-left: 1px solid var(--medium-gray);
            padding-left: 40px;
        }
        
        .contact-details {
            margin-bottom: 60px;
        }
        
        .contact-item {
            margin-bottom: 30px;
        }
        
        .contact-item i {
            margin-right: 15px;
            color: var(--dark-gray);
            width: 20px;
            text-align: center;
        }
        
        .social-links {
            display: flex;
            gap: 30px;
            margin-top: 60px;
        }
        
        .social-links a {
            font-size: 1.5rem;
        }
        
        /* 页脚样式 */
        footer {
            padding: 50px 0;
            border-top: 1px solid var(--medium-gray);
            text-align: center;
        }
        
        footer p {
            font-size: 0.9rem;
            color: var(--dark-gray);
            letter-spacing: 1px;
        }
        
        /* 响应式设计 */
        @media (max-width: 992px) {
            h2 {
                font-size: 3rem;
            }
            
            .about-content {
                grid-template-columns: 1fr;
                gap: 50px;
            }
            
            .contact-container {
                grid-template-columns: 1fr;
                gap: 50px;
            }
            
            .contact-info {
                border-left: none;
                padding-left: 0;
                border-top: 1px solid var(--medium-gray);
                padding-top: 50px;
            }
            
            #experience {
                padding-left: 50px;
            }
            
            .timeline-date {
                left: -50px;
                width: 40px;
            }
            
            .videos-container {
                grid-template-columns: 1fr;
            }
        }
        
        @media (max-width: 768px) {
            .hero-content h1 {
                font-size: 4rem;
            }
            
            .nav-links {
                display: none;
                flex-direction: column;
                position: absolute;
                top: 70px;
                left: 0;
                right: 0;
                background-color: var(--white);
                padding: 30px;
                box-shadow: var(--shadow-light);
            }
            
            .nav-links li {
                margin: 15px 0;
            }
            
            .menu-toggle {
                display: block;
            }
            
            .nav-links.active {
                display: flex;
            }
            
            .portfolio-grid {
                grid-template-columns: 1fr;
            }
            
            #experience {
                padding-left: 0;
            }
            
            #experience::before {
                display: none;
            }
            
            .timeline-date {
                position: relative;
                left: 0;
                width: auto;
                margin-bottom: 10px;
                display: inline-block;
            }
            
            .timeline-item {
                padding-right: 0;
            }
        }
        
        @media (max-width: 576px) {
            h2 {
                font-size: 2.5rem;
            }
            
            .hero-content h1 {
                font-size: 3rem;
            }
            
            .hero-content .job-title {
                font-size: 0.9rem;
                letter-spacing: 3px;
            }
            
            .about-content {
                padding: 0 20px;
            }
            
            .contact-form {
                padding-right: 0;
            }
            
            .videos-container {
                padding: 0 10px;
            }
            
            .btn {
                padding: 10px 25px;
                font-size: 0.8rem;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav id="mainNav">
        <div class="nav-container container">
            <div class="logo">Portfolio</div>
            <ul class="nav-links" id="navLinks">
                <li><a href="#hero">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#experience">Experience</a></li>
                <li><a href="#portfolio">Work</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
            <div class="menu-toggle" id="menuToggle">
                <i class="fas fa-bars"></i>
            </div>
        </div>
    </nav>
    
    <!-- 英雄区 -->
    <section id="hero">
        <div class="hero-content">
            <h1>Jeffery Zhang</h1>
            <h3>张卓非</h3>
            <div class="job-title">AIGC Artist & Creator</div>
            <p>活力与创造力并存的跨界学习者
</p>
            <a href="#portfolio" class="btn">View Work</a>
        </div>
        <div class="scroll-indicator">
            <i class="fas fa-chevron-down"></i>
        </div>
    </section>
    
    <!-- 关于我 -->
    <section id="about">
        <div class="container">
            <h2>About</h2>
            <div class="about-content">
                <div class="about-img">
                    <img src="image\职业照.jpg" alt="Portrait" class="profile-img">
                </div>
                <div class="about-text">
                    <p>本人内在驱动源于创造与创新，为追寻与性格兴趣更匹配的职业生涯，已主动系统学习AIGC相关知识，希望能为团队带来新的视角与活力 </p>
                  
                    
                    <div class="skills">
                        <div class="skill-item" data-width="95%">
                            <h4>
                                <span>审美能力</span>
                                <span>95%</span>
                            </h4>
                            <div class="progress-bar">
                                <div class="progress" style="--width: 95%"></div>
                            </div>
                        </div>
                        <div class="skill-item" data-width="90%">
                            <h4>
                                <span>创意想法</span>
                                <span>90%</span>
                            </h4>
                            <div class="progress-bar">
                                <div class="progress" style="--width: 90%"></div>
                            </div>
                        </div>
                        <div class="skill-item" data-width="85%">
                            <h4>
                                <span>SD Comfyui</span>
                                <span>85%</span>
                            </h4>
                            <div class="progress-bar">
                                <div class="progress" style="--width: 85%"></div>
                            </div>
                        </div>
                        <div class="skill-item" data-width="80%">
                            <h4>
                                <span>English</span>
                                <span>80%</span>
                            </h4>
                            <div class="progress-bar">
                                <div class="progress" style="--width: 80%"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    <!-- 工作与教育经历 -->
    <section id="experience">
        <div class="container">
            <h2>Experience</h2>
            
            <div class="timeline-item">
                <div class="timeline-date">2023</div>
                <div class="timeline-content">
                    <h3>Digital Artist</h3>
                    <span class="company">Independent Creator</span>
                    <p>Creating AI-generated artwork for exhibitions and commercial clients. Developing custom algorithms for generative art projects and interactive installations.</p>
                    <ul>
                        <li>Created a series of AI-generated portraits exhibited at the Digital Art Biennale</li>
                        <li>Developed custom Stable Diffusion models for commercial clients</li>
                        <li>Collaborated with musicians on visual accompaniment for live performances</li>
                    </ul>
                </div>
            </div>
            
            <div class="timeline-item">
                <div class="timeline-date">2021-2023</div>
                <div class="timeline-content">
                    <h3>Creative Technologist</h3>
                    <span class="company">Digital Arts Studio</span>
                    <p>Worked at the intersection of art and technology, developing interactive experiences and AI-driven installations for museums and galleries worldwide.</p>
                    <ul>
                        <li>Developed an AI-powered interactive installation for the Modern Art Museum</li>
                        <li>Created generative algorithms for real-time visual performances</li>
                        <li>Taught workshops on creative coding and AI art techniques</li>
                    </ul>
                </div>
            </div>
            
            <div class="timeline-item">
                <div class="timeline-date">2018-2021</div>
                <div class="timeline-content">
                    <h3>MFA Digital Arts</h3>
                    <span class="company">California Institute of the Arts</span>
                    <p>Graduate studies focusing on computational art, machine learning, and interactive media. Thesis project explored neural networks as creative collaborators.</p>
                    <ul>
                        <li>Exhibited thesis work "Neural Dialogues" at the university gallery</li>
                        <li>Received scholarship for excellence in digital arts</li>
                        <li>Published paper on "Creative Applications of GANs in Fine Arts"</li>
                    </ul>
                </div>
            </div>
        </div>
    </section>
    
    <!-- 作品集 -->
    <section id="portfolio">
        <div class="container">
            <h2>Photo Gallery</h2>
            
            <!-- 图片展示区 -->
            <div class="portfolio-grid">
                <div class="portfolio-item">
                    <img src="image\R0003059.jpg" alt="AI Artwork 1" class="portfolio-img">
                </div>
                <div class="portfolio-item">
                    <img src="image\R0003050.jpg" alt="AI Artwork 2" class="portfolio-img">
                </div>
                <div class="portfolio-item">
                    <img src="image\R0003126.jpg" alt="AI Artwork 3" class="portfolio-img">
                </div>
                <div class="portfolio-item">
                    <img src="image\R0003074.jpg" alt="AI Artwork 4" class="portfolio-img">
                </div>
                <div class="portfolio-item">
                    <img src="image\R0003066.jpg" alt="AI Artwork 5" class="portfolio-img">
                </div>
                <div class="portfolio-item">
                    <img src="image\R0003137.jpg" alt="AI Artwork 6" class="portfolio-img">
                </div>
                <div class="portfolio-item">
                    <img src="image\DSC07975.JPG" alt="AI Artwork 7" class="portfolio-img">
                </div>
                <div class="portfolio-item">
                    <img src="image\DSC07746.JPG" alt="AI Artwork 8" class="portfolio-img">
                </div>
                <div class="portfolio-item">
                    <img src="image\DSC07731.JPG" alt="AI Artwork 9" class="portfolio-img">
                </div>
                <div class="portfolio-item">
                    <img src="image\DSC07715.JPG" alt="AI Artwork 10" class="portfolio-img">
                </div>
                <div class="portfolio-item">
                    <img src="image\DSC07686.JPG" alt="AI Artwork 11" class="portfolio-img">
                </div>
                <div class="portfolio-item">
                    <img src="image\DSC07621.JPG" alt="AI Artwork 12" class="portfolio-img">
                </div>
                <div class="portfolio-item">
                    <img src="image\DSC07522.JPG" alt="AI Artwork 13" class="portfolio-img">
                </div>
                <div class="portfolio-item">
                    <img src="image\DSC07269.JPG" alt="AI Artwork 14" class="portfolio-img">
                </div>
                <div class="portfolio-item">
                    <img src="image\DSC05310.JPG" alt="AI Artwork 15" class="portfolio-img">
                </div>
                <div class="portfolio-item">
                    <img src="image\DSC04524.JPG" alt="AI Artwork 16" class="portfolio-img">
                </div>
                <div class="portfolio-item">
                    <img src="image\DSC04485.JPG" alt="AI Artwork 17" class="portfolio-img">
                </div>
                <div class="portfolio-item">
                    <img src="image\DSC04463.JPG" alt="AI Artwork 18" class="portfolio-img">
                </div>
                <div class="portfolio-item">
                    <img src="image\DSC04451.JPG" alt="AI Artwork 19" class="portfolio-img">
                </div>
                <div class="portfolio-item">
                    <img src="image\DSC04450.JPG" alt="AI Artwork 20" class="portfolio-img">
                </div>
                <div class="portfolio-item">
                    <img src="image\DSC04430.JPG" alt="AI Artwork 21" class="portfolio-img">
                </div>
                <div class="portfolio-item">
                    <img src="image\DSC04416.JPG" alt="AI Artwork 22" class="portfolio-img">
                </div>
                <div class="portfolio-item">
                    <img src="image\DSC04412.JPG" alt="AI Artwork 23" class="portfolio-img">
                </div>
                <div class="portfolio-item">
                    <img src="image\DSC04362.JPG" alt="AI Artwork 24" class="portfolio-img">
                </div>
                <div class="portfolio-item">
                    <img src="image\DSC04366.JPG" alt="AI Artwork 25" class="portfolio-img">
                </div>
                <div class="portfolio-item">
                    <img src="image\DSC04389.JPG" alt="AI Artwork 26" class="portfolio-img">
                </div>
                <div class="portfolio-item">
                    <img src="image\DSC04233.JPG" alt="AI Artwork 27" class="portfolio-img">
                </div>
                <div class="portfolio-item">
                    <img src="image\DSC04176.JPG" alt="AI Artwork 28" class="portfolio-img">
                </div>
                <div class="portfolio-item">
                    <img src="image\DSC04218.JPG" alt="AI Artwork 29" class="portfolio-img">
                </div>
                <div class="portfolio-item">
                    <img src="image\DSC04160.JPG" alt="AI Artwork 30" class="portfolio-img">
                </div>
                <div class="portfolio-item">
                    <img src="image\DSC03965.JPG" alt="AI Artwork 31" class="portfolio-img">
                </div>
                <div class="portfolio-item">
                    <img src="image\DSC05299.JPG" alt="AI Artwork 32" class="portfolio-img">
                </div>
                <div class="portfolio-item">
                    <img src="image\DSC05285.JPG" alt="AI Artwork 32" class="portfolio-img">
                </div>
                <div class="portfolio-item">
                    <img src="image\DSC05281.JPG" alt="AI Artwork 32" class="portfolio-img">
                </div>
                <div class="portfolio-item">
                    <img src="image\DSC05276.JPG" alt="AI Artwork 32" class="portfolio-img">
            </div>
            </div> 
            <!-- 视频展示区 -->
            <div class="video-section">
                <h3>Movie</h3>
                <div class="videos-container">
                    <div class="video-item">
                        <video controls>
                            <source src="image\片子1.mp3" type="video/mp4">
                            Your browser does not support the video tag.
                        </audio>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    <!-- 图片查看器 -->
    <div class="image-viewer" id="imageViewer">
        <div class="image-viewer-content">
            <button class="close-btn" id="closeBtn">&times;</button>
            <img src="" alt="Artwork Preview" id="viewerImage">
        </div>
    </div>
    
    <!-- 联系方式 -->
    <section id="contact">
        <div class="container">
            <h2>Contact</h2>
            <div class="contact-container">
                <div class="contact-form">
                    <form id="contactForm">
                        <div class="form-group">
                            <label for="name">Name</label>
                            <input type="text" id="name" name="name" required>
                        </div>
                        <div class="form-group">
                            <label for="email">Email</label>
                            <input type="email" id="email" name="email" required>
                        </div>
                        <div class="form-group">
                            <label for="message">Message</label>
                            <textarea id="message" name="message" required></textarea>
                        </div>
                        <button type="submit" class="btn">Send</button>
                    </form>
                </div>
                <div class="contact-info">
                    <h3>Get In Touch</h3>
                    <div class="contact-details">
                        <div class="contact-item">
                            <i class="fas fa-envelope"></i>
                            <span>zzf21310127@163.com</span>
                        </div>
                        <div class="contact-item">
                            <i class="fas fa-map-marker-alt"></i>
                            <span>中国, 深圳</span>
                        </div>
                        <div class="contact-item">
                            <i class="fas fa-phone"></i>
                            <span>+191 2433 6043 （微信同号）</span>
                        </div>
                    </div>
                 
    </section>
    
    <!-- 页脚 -->
    <footer>
        <div class="container">
            <p>&copy; 2023 Alex Morgan | AI Generative Artist. All rights reserved.</p>
        </div>
    </footer>
    
    <script>
        // 页面加载后执行
        document.addEventListener('DOMContentLoaded', function() {
            // 导航栏滚动效果
            const nav = document.getElementById('mainNav');
            window.addEventListener('scroll', function() {
                if (window.scrollY > 50) {
                    nav.classList.add('scrolled');
                } else {
                    nav.classList.remove('scrolled');
                }
            });
            
            // 移动端菜单切换
            const menuToggle = document.getElementById('menuToggle');
            const navLinks = document.getElementById('navLinks');
            
            menuToggle.addEventListener('click', function() {
                navLinks.classList.toggle('active');
                if (menuToggle.innerHTML === '<i class="fas fa-bars"></i>') {
                    menuToggle.innerHTML = '<i class="fas fa-times"></i>';
                } else {
                    menuToggle.innerHTML = '<i class="fas fa-bars"></i>';
                }
            });
            
            // 平滑滚动
            document.querySelectorAll('a[href^="#"]').forEach(anchor => {
                anchor.addEventListener('click', function(e) {
                    e.preventDefault();
                    
                    // 关闭移动菜单
                    if (navLinks.classList.contains('active')) {
                        navLinks.classList.remove('active');
                        menuToggle.innerHTML = '<i class="fas fa-bars"></i>';
                    }
                    
                    const targetId = this.getAttribute('href');
                    const targetElement = document.querySelector(targetId);
                    
                    if (targetElement) {
                        window.scrollTo({
                            top: targetElement.offsetTop - 80,
                            behavior: 'smooth'
                        });
                    }
                });
            });
            
            // 图片查看器功能
            const imageViewer = document.getElementById('imageViewer');
            const viewerImage = document.getElementById('viewerImage');
            const closeBtn = document.getElementById('closeBtn');
            const portfolioImages = document.querySelectorAll('.portfolio-img');
            
            portfolioImages.forEach(img => {
                img.addEventListener('click', function() {
                    viewerImage.src = this.src;
                    imageViewer.classList.add('active');
                    document.body.style.overflow = 'hidden';
                });
            });
            
            closeBtn.addEventListener('click', function() {
                imageViewer.classList.remove('active');
                document.body.style.overflow = 'auto';
            });
            
            imageViewer.addEventListener('click', function(e) {
                if (e.target === imageViewer) {
                    imageViewer.classList.remove('active');
                    document.body.style.overflow = 'auto';
                }
            });
            
            // 滚动动画效果
            const sections = document.querySelectorAll('section');
            const skillItems = document.querySelectorAll('.skill-item');
            
            function checkScroll() {
                sections.forEach(section => {
                    const sectionTop = section.getBoundingClientRect().top;
                    const windowHeight = window.innerHeight;
                    
                    if (sectionTop < windowHeight * 0.75) {
                        section.classList.add('visible');
                        
                        // 激活技能条动画
                        if (section.id === 'about') {
                            skillItems.forEach(item => {
                                const width = item.getAttribute('data-width');
                                item.querySelector('.progress').style.width = width;
                            });
                        }
                    }
                });
            }
            
            // 初始检查
            checkScroll();
            
            // 滚动时检查
            window.addEventListener('scroll', checkScroll);
            
            // 表单提交
            const contactForm = document.getElementById('contactForm');
            
            contactForm.addEventListener('submit', function(e) {
                e.preventDefault();
                
                // 简单表单验证
                const name = document.getElementById('name').value;
                const email = document.getElementById('email').value;
                const message = document.getElementById('message').value;
                
                if (name && email && message) {
                    alert('Thank you for your message. I will get back to you soon.');
                    contactForm.reset();
                } else {
                    alert('Please fill in all required fields.');
                }
            });
            

        });
    </script>
</body>
</html>